<template>
	<div>
		<mj-title type="h2" title="Layout 布局"></mj-title>
		<div class="page-desc">用于布局的容器组件，方便快速搭建页面的基本结构：</div>
		<ul class="page-list">
			<li><code>&lt;mj-layout&gt;</code>：布局容器。其下可嵌套 <code>Header</code><code>Sider</code><code>Content</code><code>Footer</code>或 <code>Layout</code> 本身，可以放在任何父容器中。</li>
			<li><code>&lt;mj-header></code>：顶栏容器。</li>
			<li><code>&lt;mj-aside></code>：侧边栏容器。</li>
			<li><code>&lt;mj-content></code>：主要区域容器。</li>
			<li><code>&lt;mj-footer></code>：底栏容器。</li>
		</ul>

		<mj-tabs class="mb50">
			<mj-tab-pane label="示例1" name="html">
				<mj-layout>
					<mj-header>header</mj-header>
					<mj-content>content</mj-content>
					<mj-footer>footer</mj-footer>
				</mj-layout>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-layout>
							&lt;mj-header>header&lt;/mj-header>
							&lt;mj-content>content&lt;/mj-content>
							&lt;mj-footer>footer&lt;/mj-footer>
						&lt;/mj-layout>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-tabs class="mb50">
			<mj-tab-pane label="示例2" name="html">
				<mj-layout>
					<mj-header>header</mj-header>
					<mj-layout>
						<mj-sider>sider</mj-sider>
						<mj-content>content</mj-content>
					</mj-layout>
					<mj-footer>footer</mj-footer>
				</mj-layout>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-layout>
							&lt;mj-header>header&lt;/mj-header>
							&lt;mj-layout>
								&lt;mj-sider>sider&lt;/mj-sider>
								&lt;mj-content>content&lt;/mj-content>
							&lt;/mj-layout>
							&lt;mj-footer>footer&lt;/mj-footer>
						&lt;/mj-layout>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-tabs class="mb50">
			<mj-tab-pane label="示例3" name="html">
				<mj-layout>
					<mj-sider>sider</mj-sider>
					<mj-layout>
						<mj-header>header</mj-header>
						<mj-content>content</mj-content>
						<mj-footer>footer</mj-footer>
					</mj-layout>
				</mj-layout>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-layout>
							&lt;mj-sider>sider&lt;/mj-sider>
							&lt;mj-layout>
								&lt;mj-header>header&lt;/mj-header>
								&lt;mj-content>content&lt;/mj-content>
								&lt;mj-footer>footer&lt;/mj-footer>
							&lt;/mj-layout>
						&lt;/mj-layout>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>
	</div>
</template>

<style scoped>
.mj-layout {background: var(--lightgray);color:var(--white);text-align:center;}
.mj-header {background:var(--royalblue);line-height: 50px;}
.mj-content {background:var(--blue);line-height: 200px;}
.mj-sider {background:var(--green);width:200px;display: flex;justify-content: center;align-items:center;}
.mj-footer {background:var(--royalbluehover);line-height: 50px;}
</style>